<template>
  <view class="m-my">
    <view class="header-bg"></view>
    <view class="user-info">
      <view class="info">
        <view class="avatar">
          <x-image v-if="userInfo && userInfo.headImg" :src="userInfo.headImg" />
          <open-data v-else type="userAvatarUrl" />
        </view>
        <view class="nick-name">
          <view v-if="userInfo && userInfo.nickname">
            {{userInfo.nickname}}
          </view>
          <open-data v-else type="userNickName" />
          <view class="phone" v-if="userInfo">{{ userInfo.accountMobile ? encryptMobile(userInfo.accountMobile) : '' }}</view>
        </view>
      </view>
      <view class="complaint" @click="handledToComplaint">
        投诉商家
      </view>
    </view>
    <view class="body">
      <view class="block order">
        <view class="dt" @click="onOrderList({value: 0})">
          <view class="name">我的订单</view>
          <view class="suffix">查看全部订单</view>
          <view class="icon">
            <x-icon name="icon-017" size="26" color="#A4A4A4" />
          </view>
        </view>
        <view class="dd">
          <view v-for="item in status" :key="item.value" class="li">
            <view class="item" @click="onOrderList(item)">
              <view class="icon">
                <x-image :src="item.icon" />
                <view v-if="item.count > 0" class="_tips">{{ item.count }}</view>
              </view>
              <view class="name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="block order">
        <x-button transparent styles="background:#ffffff;border:none;">
          <view class="dt" @click="onServeList({value: 0})">
            <view class="name">我的服务</view>
          </view>
        </x-button>
        <view class="dd service">
          <view v-for="item in serviceList" :key="item.value" class="li-4">
            <view class="item" @click="onServeList(item)">
              <view class="icon">
                <x-image :src="item.icon" />
              </view>
              <view class="name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="block order">
        <view class="dd flex" style="padding: 0">
          <view v-for="item in statusInfo" :key="item.value" class="li flex1">
            <view class="item" @click="onMiddleList(item)">
              <view class="count">
                {{item.count}}
              </view>
              <view class="name" style="padding: 0">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
      <div v-if="!isSaas" class="m-mp-banner" @click="handledNavigateTo('banner')">
        <x-image src="/assets/images/pic-082202.jpeg" />
      </div>
    </view>

    <view v-if="version" class="version">
      v{{version}}
    </view>

    <!-- 定向弹窗 -->
    <x-pop-box :triggerType="8" :query="query"/>

    <!-- 订阅消息 -->
    <p-subscription-fixed />
  </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import config from '@/config';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XButton from '@/components/x-button';
import XPopBox from '@/components/x-pop-box';
import PSubscriptionFixed from './components/p-subscription-fixed';

export default {
  name: 'My',
  components: {
    XPopBox,
    XIcon,
    XImage,
    XButton,
    PSubscriptionFixed
  },
  props: {},
  data() {
    return {
      isSaas: config.project === 'saas',
      version: null,
      status: [{
        name: '待付款',
        icon: '/assets/images/meo-wallet.png',
        value: 1,
        count: 0
      }, {
        name: '待成团',
        icon: '/assets/images/meo-group-line.png',
        value: 2,
        count: 0
      }, {
        name: '待发货',
        icon: '/assets/images/meo-deliver.png',
        value: 3,
        count: 0
      }, {
        name: '待收货',
        icon: '/assets/images/meo-receiving.png',
        value: 4,
        count: 0
      }, {
        name: '待评价',
        icon: '/assets/images/meo-evaluation.png',
        value: 5,
        count: 0
      }, {
        name: '退款/售后',
        icon: '/assets/images/meo-back-line.png',
        value: 6,
        count: 0
      }],
      // 获取用户优惠券/商品收藏/店铺关注信息
      storeFansInfo: {}
    };
  },
  computed: {
    ...mapGetters([
      'dictionary'
    ]),
    ...mapState({
      userInfo: state => state['user'].userInfo
    }),
    statusInfo() {
      const { couponCount, productCount, storeCount } = this.storeFansInfo;
      const list = [{
        name: '优惠券',
        value: 'coupon/coupon-my/index',
        count: couponCount || 0
      }, {
        name: '商品收藏',
        value: 'serve/collect-goods',
        count: productCount || 0
      }];
      if (!this.isSaas) {
        list.push({
          name: '店铺关注',
          value: 'serve/follow-store',
          count: storeCount || 0
        });
      }
      return list;
    },
    serviceList() {
      const list = [
        {
          name: '我的评价',
          icon: '/assets/images/mes-evaluation.png',
          value: 'serve/apprise/my-apprise'
        },
        {
          name: '收货地址',
          icon: '/assets/images/mes-address.png',
          value: 4
        },
        {
          name: '产品反馈',
          icon: '/assets/images/mes-suggest.png',
          value: 'serve/feedback/index'
        },
        {
          name: '投诉商家',
          icon: '/assets/images/mes-complaint.png',
          value: 'serve/feedback/feedback-sub?complaintType=3'
        },
        {
          name: '公众号',
          icon: '/assets/images/pic-082203.svg',
          value: 'icon'
        },
        {
          name: '关于我们',
          icon: '/assets/images/svg-about.svg',
          value: 'serve/about/index'
        },
        {
          name: '服务进度',
          icon: '/assets/images/serve-progress.png',
          value: 'serve/progress/index'
        }
      ];
      // saas过滤掉公众号
      return list.filter(item => this.isSaas ? item.name !== '公众号' : true);
    }
  },
  watch: {},
  onLoad() {
    this.$store.dispatch('system/dictionary', 'MP_LINK_LIST');
    try {
      this.version = config.appVersion || '1.0.0';
    } catch (e) {
      console.warn(e);
    }
  },
  onShow() {
    this.$store.dispatch('user/login').then(() => {
      this.$store.dispatch('user/getUserInfo').then(() => {
        this.getInfo();
      });
    });
    // 再次返回页面的时候，更新缓存中的数据
    this.$XTrack('onLoad');
  },
  methods: {
    // 手机号码加星号
    encryptMobile(val) {
      return val.substr(0, 3) + '****' + val.substr(7);
    },
    //  获取用户优惠券/商品收藏/店铺关注信息
    getInfo() {
      this.$http({
        login: true,
        url: '/account/store/fans/info',
        method: 'get'
      }).then(res => {
        this.storeFansInfo = res.data || {};
      });
    },
    //  订单跳转
    onOrderList(item) {
      if (item.value === 6) {
        uni.navigateTo({
          url: '/packages/order/refund/list'
        });
      } else {
        uni.navigateTo({
          url: `/packages/order/list/index?status=${item.value}`
        });
      }
    },
    //  中间跳转
    onMiddleList(item) {
      uni.navigateTo({
        url: `/packages/${item.value}`
      });
    },
    //  服务跳转
    onServeList(item) {
      if (item.name === '收货地址') {
        uni.chooseAddress({
          success(res) {
            console.log(res);
          }
        });
      } else if (item.name === '公众号') {
        this.handledNavigateTo('icon');
      } else {
        uni.navigateTo({
          url: `/packages/${item.value}`
        });
      }
    },
    handledNavigateTo(type) {
      let find;
      if (this.dictionary['MP_LINK_LIST']) {
        const key = `${config.isOpen ? config.project : config.appId}|${type}`;
        find = this.dictionary['MP_LINK_LIST'].find(item => item.value === key);
      }
      if (find) {
        uni.navigateTo({
          url: `/packages/activity/flower/index?webViewUrl=${encodeURIComponent(find.label)}`
        });
      }
    },
    handledToComplaint() {
      uni.navigateTo({
        url: '/packages/serve/feedback/feedback-sub?complaintType=3'
      });
    }
  }
};
</script>

<style lang="scss">
.m-mp-top{ height: 238px;}
.m-mp-banner{ height: 160px; margin-bottom: 20px; border-radius: 10px; overflow: hidden;}
.x-button.is-medium.is-border {
  line-height: initial !important;
}
.m-my{
  min-height: 100vh;
  position: relative;
  .header-bg{
    width: 100%;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: cdn('/images/me-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }
  .user-info{
    display: flex;
    align-items: center;
    padding: 45px 0;
    .info{ flex: 1; display: flex; align-items: center; padding: 0 26px;}
    .avatar{
      width: 80px;
      height: 80px;
      border-radius: 80px;
      margin-right: 12px;
      overflow: hidden;
    }
    .nick-name{
      font-size: 32px;
      color: #323233;
      line-height: 44px;
      text-align: left;
      margin-left: 8px;
    }
    .phone{
      font-size: 28px;
      color: #999999;
    }
    .complaint{ line-height: 1; font-size: 30px; color: #fff; background: #E95449; border-radius: 48px 0 0 48px; padding: 15px 26px 15px 42px;}
  }
  .body{
    padding: 0 24px 24px;
    .block{
      background-color: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 20px;
      &:last-child{ margin-bottom: 0;}
    }
    .order{
      position: relative;
      .dt{
        border-bottom: 1px solid #F3F4F6; height: 100px; display: flex; align-items: center; padding: 0 26px;
        .name{ flex: 1; font-size: 28px; text-align: left;color: #323233;}
        .suffix{ font-size: 27px; color: #999999;}
      }
      .dd{
        padding:20px 0; display: flex; align-items: center; text-align: center;flex-wrap:wrap;
        .li{ width: 33.33%;}
        .li-4{ width: 25%;}
        .item{ padding: 20px;
          .icon{ width: 48px;height: 48px;margin: 0 auto;position: relative;
            ._tips{ position: absolute;top: -14px;right: -14px;min-width: 28px;height: 28px;padding: 0 8px;border-radius: 28px;background: #EB441F;color: #FFFFFF;font-size: 20px;display: flex;align-items: center;justify-content: center }
          }
        }
        .count{ color: #323233;font-size: 36px;font-weight: bold;}
        .name{ color: #333; font-size: 26px; padding-top: 10px;}
      }
      .service{
        padding:20px 0;
      }
    }
  }
  .version{ width: 100%; padding-bottom: 20px; text-align: center; color: #dddddd; font-size: 24px; }
}
</style>
